<template>
    <div class="cinema" :style="{height:height}">
        <ul>
            <li v-for="cinema in cinemaList" :key="cinema.cinemaId">
                <div>{{cinema.name}}</div>
                <div class="address">{{cinema.address}}</div>
            </li>
        </ul>

    </div>
</template>

<script>
import http from "@/utils/http"
import BetterScroll from "better-scroll"
export default {
    data(){
        return{
            cinemaList:[],
            height:0
        }
    },
    mounted(){
        // 设置滚动区域的高度为可视区高度
        this.height=document.documentElement.clientHeight-54+"px"
        http({
            url:`/gateway?cityId`,
            headers:{
                'X-Host':''
            }
        }).then((res)=>{
            this.cinemaList=res.data.data.cinemas
            this.$nextTick(()=>{
                new BetterScroll(".cinema",{
                    scrollbar:{
                        fade:true //滚动时显示滚动条，不滚动时隐藏滚动条
                    }
                })
            })
        })
    }
    
}
</script>
<style lang="scss" scoped>
    .cinema{
        // 溢出隐藏better-scroll才能起作用
        overflow: hidden;
        // 让滚动条相对于cinema定位
        position: relative;
    }li{
        padding: 5px;
        .address{
            font-size: 12px;
            color:gray;
        }
    }
</style>

